<template>
    <view class="container">
      <web-view 
        :src="webViewSrc" 
        @message="handleMessage"
        @load="onLoad"
        @error="onError"
      ></web-view>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        webViewSrc: ''
      }
    },
    onLoad(options) {
      console.log("options",options)
      // 优先尝试加载静态文件
      // App 端使用本地文件方式
      this.createLocalHtmlFile(decodeURIComponent(options.url))
    },
    methods: {
      // 创建本地 HTML 文件
      createLocalHtmlFile(url) {
        const fs = plus.io.requestFileSystem(plus.io.PRIVATE_DOC, (fs) => {
          fs.root.getFile('alipay_pay.html', {create: true}, (fileEntry) => {
            fileEntry.createWriter((writer) => {
              // 写入支付宝支付表单内容
              const htmlContent = url;
              
              writer.onwriteend = () => {
                this.webViewSrc = fileEntry.toURL();
              };
              writer.write(htmlContent);
            });
          });
        });
      },
      
      // 处理从H5页面发送的消息
      handleMessage(e) {
        const data = e.detail.data;
        if (data.type === 'payment_result') {
          // 处理支付结果
          console.log('支付结果:', data.data);
          // 根据结果返回上一页或进行其他操作
          uni.navigateBack();
        }
      },
      
      
      
      // 页面加载错误
      onError(e) {
        console.error('支付页面加载错误:', e.detail);
        uni.showToast({
          title: '支付页面加载失败',
          icon: 'none'
        });
      }
    }
  }
  </script>
  
  <style scoped>
  .container {
    width: 100%;
    height: 100vh;
  }
  </style>
  